<template>
	<view>
		<top-navigation bgColor="#ffffff">
			<template #center-slot>
				<view class="nav">
					设置
				</view>
			</template>
		</top-navigation>
		<view class="func-line" @tap="clearCache">
			<view class="left-title">
				<image src="/module/static/images/cancellation-account.png"></image>
				<view class="func-title">清理缓存</view>
			</view>
			<view class="func-content">{{currentSize}}</view>
		</view>
		<view class="func-line" @tap="$navto('/module/app-login/forget?type=2')">
			<view class="left-title">
				<image src="/module/static/images/set-password.png"></image>
				<view class="func-title">修改密码</view>
			</view>
			<u-icon name="arrow-right" color="#333"></u-icon>
		</view>
		<view class="func-line" @tap="$navto('/module/setup/feedback')">
			<view class="left-title">
				<image src="/module/static/images/feedback.png"></image>
				<view class="func-title">意见反馈</view>
			</view>
			<u-icon name="arrow-right" color="#333"></u-icon>
		</view>
		<view class="func-line" @tap="$toTreaty('关于我们')">
			<view class="left-title">
				<image src="/module/static/images/about-us.png"></image>
				<view class="func-title">关于我们</view>
			</view>
			<u-icon name="arrow-right" color="#333"></u-icon>
		</view>
		<view class="func-line" @tap="detectionUpdate">
			<view class="left-title">
				<image src="/module/static/images/current-version.png"></image>
				<view class="func-title">当前版本</view>
			</view>
			<view class="func-content">{{ version }}</view>
		</view>
		<view class="func-line" @tap="$toTreaty('用户协议')">
			<view class="left-title">
				<image src="/module/static/images/user-agreement.png"></image>
				<view class="func-title">用户协议</view>
			</view>
			<u-icon name="arrow-right" color="#333"></u-icon>
		</view>
		<view class="func-line" @tap="$toTreaty('隐私协议')">
			<view class="left-title">
				<image src="/module/static/images/privacy-agreement.png"></image>
				<view class="func-title">隐私协议</view>
			</view>
			<u-icon name="arrow-right" color="#333"></u-icon>
		</view>
		<view class="func-button" @tap="logOut">退出当前账号</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentSize: '', // 缓存大小
				version: '', // 版本号
			};
		},
		onLoad() {
			this.calcCache()
			this.calcVersion()
		},
		methods: {
			// 清理缓存
			clearCache() {
				uni.$showModal({
						title: '提示',
						content: '清理缓存后将会清理该程序产生的所有缓存数据，您确定继续吗？',
						confirmText: '继续',
					})
					.then(() => {
						uni.showLoading({
							mask: true,
							title: '正在清理'
						});

						setTimeout(() => {
							this.calcCache()
							uni.clearStorage();
							uni.hideLoading();
							uni.showToast({
								title: '清理成功',
								duration: 1000
							});
						}, 2000);
					})
			},
			// 计算缓存
			calcCache() {
				const {
					currentSize
				} = uni.getStorageInfoSync()
				console.log('缓存大小：', currentSize)
				if (currentSize < 1024) {
					this.currentSize = currentSize.toFixed(2) + 'Kb';
				} else if (currentSize < 1024 * 1024) {
					this.currentSize = currentSize.toFixed(2) + 'Mb';
				}
			},
			// 获取版本号
			calcVersion() {
				// #ifdef APP-PLUS
				this.version = plus.runtime.version;
				// #endif
				// #ifdef H5
				this.version = '网页暂无版本号';
				// #endif
				// #ifdef MP-WEIXIN
				const {
					miniProgram
				} = wx.getAccountInfoSync()
				if (miniProgram.version) this.version = miniProgram.version
				else this.version = miniProgram.envVersion
				// #endif
			},
			// 退出登录
			logOut() {
				uni.$showModal({
						title: '提示',
						content: '您确定要退出当前账号吗？'
					})
					.then(() => {
						console.warn('退出操作自行处理')
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: $uni-bg-color-grey;
	}

	.func-line {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 27rpx 32rpx 20rpx;
		background: #FFF;
		width: 668rpx;
		margin: 20rpx auto 0 auto;
		box-sizing: border-box;
		border-radius: 12rpx;
		.left-title {
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			.func-title {
				font-size: 28rpx;
				color: #333333;
				margin-left: 16rpx;
			}
		}

		image {
			width: 16rpx;
			height: 27rpx;
		}

		.func-content {
			font-size: 28rpx;
			color: #333;
		}
	}

	.func-button {
		position: fixed;
		bottom: 48rpx;
		left: 50%;
		transform: translateX(-50%);
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		width: 668rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		background: #FFF;
		color: $uni-color-primary;
	}
</style>
